<nz-card class="m-b-2">
    <div class="common-search-wrap">
        <div class="common-search-forms">
            <div class="common-form-item">
                <label class="common-search-label">订单状态</label>
                <div class="common-search-conrol">
                    <nz-select
                        [(ngModel)]="queryForm.stateList"
                        nzAllowClear
                        [nzShowArrow]="true"
                        nzMode="multiple"
                        [nzMaxTagCount]="1"
                        nzPlaceHolder="请选择">
                        <nz-option *ngFor="let item of stateSet | keyvalue" nzValue="{{item.key}}" nzLabel="{{item.value}}">
                        <!-- <nz-option *ngFor="let item of stateSet" nzValue="{{item.key}}" nzLabel="{{item.value}}"> -->
                        </nz-option>
                    </nz-select>
                </div>
            </div>

            <div class="common-form-item">
                <label class="common-search-label">订单来源</label>
                <div class="common-search-conrol">
                    <nz-select
                        nzShowSearch
                        nzAllowClear
                        nzMode="multiple"
                        [nzMaxTagCount]="1"
                        nzPlaceHolder="请选择"
                        [(ngModel)]="scurceSelected"
                        (ngModelChange)="orderSourceChange($event)">
                        <nz-option
                            *ngFor="let val of orderSourceOptions"
                            [nzLabel]="val.name"
                            [nzValue]="val.content">
                        </nz-option>
                    </nz-select>
                </div>
            </div>

            <div class="common-form-item">
                <label class="common-search-label">出库类型</label>
                <div class="common-search-conrol">
                    <nz-select 
                        [(ngModel)]="queryForm.typeList"
                        nzAllowClear
                        [nzShowArrow]="true"
                        nzMode="multiple"
                        [nzMaxTagCount]="1"
                        nzPlaceHolder="请选择">
                        <nz-option *ngFor="let item of typeSet | keyvalue" nzValue="{{item.key}}" nzLabel="{{item.value}}">
                        </nz-option>
                    </nz-select>
                </div>
            </div>

            <div class="common-form-item">
                <label class="common-search-label">包含商品</label>
                <div class="common-search-conrol">
                    <input nz-input [(ngModel)]="queryForm.whGoods" placeholder="请输入" />
                </div>
            </div>

            <div class="common-form-item" [hidden]="!isCollapse">
                <label class="common-search-label">供应商</label>
                <div class="common-search-conrol">
                    <nz-select
                        [(ngModel)]="queryForm.supplierList"
                        [nzMaxTagCount]="1"
                        nzAllowClear
                        nzShowSearch
                        nzMode="multiple"
                        nzPlaceHolder="全部"
                    >
                        <nz-option
                            *ngFor="let supplier of supplierItems"
                            [nzValue]="supplier.id"
                            [nzLabel]="supplier.name">
                        </nz-option>
                    </nz-select>
                </div>
            </div>

            <div class="common-form-item" [hidden]="!isCollapse">
                <label class="common-search-label">实际出库日期</label>
                <div class="common-search-conrol">
                    <nz-range-picker
                        [(ngModel)]="cacheData.storageDate"
                        (ngModelChange)="onStorageDateChange($event)">
                    </nz-range-picker>
                </div>
            </div>

            <div class="common-form-item">
                <div class="common-search-conrol">
                    <button nz-button nzType="primary" class="m-r-8" (click)="onQuery()">查询</button>
                    <button nz-button nzType="default" (click)="restQuery()">重置</button>
                    <button nz-button nzType="link" (click)="isCollapse = !isCollapse">
                        {{ isCollapse ? '收起' : '展开' }}<i nz-icon [nzType]="isCollapse ? 'up' : 'down'" nzTheme="outline"></i>
                    </button>
                </div>
            </div>
        </div>
    </div>
</nz-card>

<nz-card class="pagination-wrap-position">
    <div class="operation-wrap p-b-10">
        <button
            *ngIf="permission.userPermission.has('finance:outDetail:export')"
            nz-button
            nzType="primary"
            [nzLoading]="exportLoading"
            (click)="onExport()">
            <i nz-icon nzType="download" nzTheme="outline"></i>
            导出
        </button>
    </div>

    <div class="table-wrap">
        <nz-table
            #basicTable
            nzSize="small"
            nzShowSizeChanger
            nzShowQuickJumper
            nzOuterBordered
            [nzScroll]="{ x: '1100px' }"
            [nzFrontPagination]="false"
            [nzLoadingDelay]="100"
            [nzData]="tableData?.list"
            [nzPageSizeOptions]="[5, 10, 20, 50, 100]"
            [nzTotal]="tableData.count"
            [nzPageIndex]="queryForm.page"
            [nzPageSize]="queryForm.pageSize"
            [nzShowTotal]="totalTemplate"
            (nzPageIndexChange)="onPageIndexChange($event)"
            (nzPageSizeChange)="onPageSizeChange($event)"
        >
            <thead>
                <tr>
                    <th nzAlign="center" nzWidth="160px" nzLeft>实际出库日期</th>
                    <th nzAlign="center" nzWidth="180px" nzLeft>出库单号</th>
                    <th nzAlign="center" nzWidth="180px">关联单号</th>
                    <th nzAlign="center" nzWidth="180px">来源平台</th>
                    <th nzAlign="center" nzWidth="130px">出库类型</th>
                    <th nzAlign="center" nzWidth="130px">单据状态</th>
                    <th nzAlign="center" nzWidth="130px">供应商/客户</th>
                    <th nzAlign="center" nzWidth="120px">商品编码</th>
                    <th nzAlign="center" nzWidth="140px">69码</th>
                    <th nzAlign="center" nzWidth="180px">商品名称</th>
                    <th nzAlign="center" nzWidth="160px">规格</th>
                    <th nzAlign="center" nzWidth="120px">要求出库数量</th>
                    <th nzAlign="center" nzWidth="120px">实际出库数量</th>
                    <th nzAlign="center" nzWidth="180px">备注</th>
                </tr>
            </thead>
  
            <tbody>
                <tr *ngFor="let item of tableData?.list; let index = index;">
                    <!-- 实际出库日期 -->
                    <td nzAlign="center" nzLeft>{{ (item.deliveryTime | date: 'yyyy-MM-dd') || '-' }}</td>
                    <!-- 出库单号 -->
                    <td nzAlign="center" nzLeft>
                        <a
                            nz-button
                            nzType="link"
                            target="_blank"
                            [disabled]="!item.deliveryNumber"
                            [routerLink]="['/stock/outDetails/' + item.deliveryNumber]"
                            [queryParams]="{ deliveryNumber: item.deliveryNumber }">
                            <span class="herf-ah">{{ item.deliveryNumber || '-' }}</span>
                        </a>
                    </td>
                    <!-- 关联单号 -->
                    <td nzAlign="center">{{ item.orderNum || '-' }}</td>
                    <!-- 来源平台 -->
                    <td nzAlign="center">{{ dictTextFilter(item.sourceType, orderSourceOptions) }}</td>
                    <!-- 出库类型 -->
                    <td nzAlign="center">{{ type_to_text(item.type) }}</td>
                    <!-- 单据状态 -->
                    <td nzAlign="center">{{ state_to_text(item.state) }}</td>
                    <!-- 供应商/客户 -->
                    <td nzAlign="center">{{ item.supplier || '-' }}</td>
                    <!-- 商品编码 -->
                    <td nzAlign="center">
                        <a
                            nz-button
                            nzType="link"
                            target="_blank"
                            [disabled]="!item.whGoodsId"
                            [routerLink]="['/stock/warehouseGoodsAdd', item.whGoodsId]">
                            <span class="herf-ah">{{ item.whGoodsId || '-' }}</span>
                        </a>
                    </td>
                    <!-- 69码 -->
                    <td nzAlign="center">{{ item.code }}</td>
                    <!-- 商品名称 -->
                    <td nzAlign="center">{{ item.whGoods }}</td>
                    <!-- 规格 -->
                    <td nzAlign="center">{{ item.attr }}</td>
                    <!-- 要求出库数量 -->
                    <td nzAlign="center">{{ item.number }}</td>
                    <!-- 实际出库数量 -->
                    <td nzAlign="center">{{ item.actualNumber }}</td>
                    <!-- 备注 -->
                    <td nzAlign="center">{{ item.remark || '-' }}</td>
                </tr>
            </tbody>
        </nz-table>
  
        <!-- 分页template -->
        <ng-template #totalTemplate let-total>共有 {{ tableData.count }} 条</ng-template>
    </div>
</nz-card>
